<template>
  <div class="api-test">
    <h2>API 测试页面</h2>
    
    <div class="test-section">
      <el-button @click="testAPI('/api/carousel')" type="primary">测试轮播图API</el-button>
      <el-button @click="testAPI('/api/category')" type="success">测试分类API</el-button>
      <el-button @click="testAPI('/api/good')" type="warning">测试商品API</el-button>
    </div>
    
    <div class="result-section" v-if="response">
      <h3>API 响应结果：</h3>
      <pre>{{ JSON.stringify(response, null, 2) }}</pre>
    </div>

    <div class="error-section" v-if="error">
      <h3>错误信息：</h3>
      <el-alert
        title="API请求失败"
        type="error"
        :description="error"
        show-icon
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserWebApiTest'
}
</script>

<script setup>
import { ref, inject } from 'vue';

const $axios = inject('$axios');
const response = ref(null);
const error = ref(null);

const testAPI = async (url) => {
  response.value = null;
  error.value = null;
  
  try {
    console.log(`正在测试API: ${url}`);
    const res = await $axios.get(url);
    console.log('API响应:', res);
    response.value = res;
  } catch (err) {
    console.error('API请求失败:', err);
    error.value = err.message || '未知错误';
  }
};
</script>

<style scoped>
.api-test {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h2 {
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.test-section {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.result-section {
  background-color: #f8f8f8;
  padding: 15px;
  border-radius: 5px;
  margin-top: 20px;
}

.result-section pre {
  white-space: pre-wrap;
  word-break: break-all;
}

.error-section {
  margin-top: 20px;
}
</style> 